<template>
  <div id="path-analysis">
    <v-header ref="vHeader" title="路径分析" @on-save="save" :showDownloadBtn="false"></v-header>
    <div class="box" style="height: calc(100% - 56px); padding: 10px 0 10px 10px;">
      <div style="height: 100%; overflow: auto;">
        <div style="padding-right: 10px">
          <div class="query-conditions">
            <div class="common-conditions">
              <div class="tags">
                <!------常用------>
                <v-pageHeader ref="pageHeader" :InquireTransCode="InquireTransCode" @on-click="showList" :setTransCode="setTransCode" :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"  num="04"></v-pageHeader>
              </div>
            </div>
            <div class="time-screening">
              <span class="font12 padding20">查询日期</span>
              <range-date-picker class="displaybox" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
              <!--------事件开始-------->
              <div class="conversation">
                <span class="font12">开始事件</span>
                <el-select size="mini" class="width160" placeholder="请选择开始事件" v-model="start_event" filterable>
                  <el-option
                    v-for="item in event_list"
                    :key="item.event_id"
                    :label="item.event_name"
                    :value="item.event_id">
                  </el-option>
                </el-select>
                <!--<i class="iconfont icon-add" @click="addEvent(index, 0)"></i>-->
                <!--<i v-if="eventGroup.length > 1" class="iconfont icon-close" @click="removeEvent(index, 0)"></i>-->
              </div>
              <!--------过程-------->
              <div class="conversation" v-for="(val, index) in eventGroup" :key="val.key">
                <span class="font12">过程事件</span>
                <el-select size="mini" class="width160" placeholder="请选择过程事件" v-model="eventGroup[index].event_id" filterable clearable>
                  <el-option
                    v-for="item in event_list"
                    :key="item.event_id"
                    :label="item.event_name"
                    :value="item.event_id">
                  </el-option>
                </el-select>
                <i class="iconfont icon-add" @click="addEvent(index)"></i>
                <i v-if="eventGroup.length > 1" class="iconfont icon-close" @click="removeEvent(index)"></i>
              </div>
              <!--结束事件-->
              <div class="conversation">
                <span class="font12">结束事件</span>
                <el-select size="mini" class="width160" placeholder="请选择结束事件" v-model="end_event" filterable clearable>
                  <el-option
                    v-for="item in event_list"
                    :key="item.event_id"
                    :label="item.event_name"
                    :value="item.event_id">
                  </el-option>
                </el-select>
              </div>
              <!--层级-->
              <div class="conversation">
                <span class="font12">层级定义</span>
                <el-select size="mini" class="width160" placeholder="请选择层级事件" v-model="layouts" filterable>
                  <el-option
                    v-for="item in layoutsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div></div>
              <!--筛选条件 start-->
              <div class="filter-conditions  bg-color-white font12">
                <div class="examine">
                  <div class="btns rf">
                    <el-button type="primary" size="mini" @click="sureEven(1)">查看</el-button>
                    <el-button size="mini" @click="cancelEven">重置</el-button>
                  </div>
                </div>
              </div>
              <!--筛选条件 end-->
            </div>
            <div class="f-chart">
              <div>
                <el-button type="primary" size="mini" @click="sureEven(1)">桑基图</el-button>
                <el-button type="primary" size="mini" @click="sureEven(2)">树图</el-button>
              </div>
              <div class="btns" v-show="btnFalg">
                <!-- <el-button size="mini" @click="expansionTree('null')">全部展开</el-button> -->
                <el-button size="mini" @click="expansionTree(0)">全部收缩</el-button>
                <!-- <el-button size="mini" @click="expansionTree(optionsz.series[0].initialTreeDepth + 1)">展开下一层</el-button> -->
              </div>
              <!--echarts 图形容器-->
              <div id="main" class="canvas"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {VHeader, VPageHeader, RangeDatePicker, VButton} from '../../../../components'
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/ajax'
  import {getDateTime, dateFormat} from '../../../../assets/js'
  import echarts from 'echarts'
  import Msg from '../../../../assets/js/msg'

  export default{
    data () {
      return {
        btnFalg: false,
        start_event: '', // 开始事件
        layouts: '5', // 层级
        layoutsList: [
          {
            value: '3',
            label: '3'
          },
          {
            value: '5',
            label: '5'
          },
          {
            value: '10',
            label: '10'
          },
          {
            value: 'All',
            label: '全部'
          }
        ], // 层级内容
        end_event: '', // 结束事件
        eventGroup: [
          {
            event_id: ''
          }
        ], // 事件组
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        analyse_type: '04',
        dates: [], // 时间
        event_list: [], // 事件
        from_date: '', // 开始时间
        to_date: '', // 结束时间
        optionsz: { // echarts 配置项 树形
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              // 数据源
              data: [],
              left: '2%',
              right: '2%',
              top: '8%',
              bottom: '20%',
              symbol: 'emptyCircle',
              orient: 'vertical',
              expandAndCollapse: true,
              initialTreeDepth: 2,
              label: {
                normal: {
                  position: 'top',
                  rotate: 0,
                  verticalAlign: 'middle',
                  align: 'center',
                  fontSize: 14
                }
              },
              leaves: {
                label: {
                  normal: {
                    position: 'top',
                    rotate: 0,
                    verticalAlign: 'middle',
                    align: 'center'
                  }
                }
              },
              animationDurationUpdate: 950
            }
          ]
        },
        options: { // echarts 配置项 桑基图
//          title: {
//            text: 'Sankey Diagram'
//          },
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: {
            type: 'sankey',
            layout: 'none',
            data: [],
            links: []
          }
        },
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        }
      }
    },
    methods: {
      // 点击控制树节点展开收缩
      expansionTree (num) {
        this.sureEven(2)
        this.optionsz.series[0].initialTreeDepth = num
      },
      // 点击添加事件
      addEvent (index) {
        let itemParams = {
          event_id: ''
        }
        this.eventGroup.splice(index + 1, 0, itemParams) // 事件
      },
      // 点击删除事件
      removeEvent (index) {
        this.eventGroup.splice(index, 1)
      },
      save (obj) { // 点击保存为常用
        if (!this.from_date || !this.to_date) {
          Msg.alert('请选择查询日期')
          return
        } else if (!this.start_event) {
          Msg.alert('请选择开始事件')
          return
        } else if (!this.layouts) {
          Msg.alert('请选择层级定义')
          return
        }
        // 保存页面输入的内容
        let paramsData = {
          event_list: this.eventGroup, // 过程
          layouts: this.layouts, // 层级
          end_event: this.end_event, // 结束事件 end_event
          start_event: this.start_event, // 开始事件 start_event
          from_date: this.from_date,
          to_date: this.to_date,
          analyse_type: this.analyse_type
        }
        // 调用 保存为常用接口
        ajax.post(api.SAVEASCOMMON,
          {
            anal_name: obj.pageHeaderName,
            anal_type: this.analyse_type,
            is_top: obj.isTop,
            message_content: JSON.stringify(paramsData)
          }
        ).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.InquireTransCode, { anal_type: this.analyse_type }).then(res => {
            this.$refs.pageHeader.getList(res.data)
            this.$refs.vHeader.reset()
          })
        })
      },
      // 获取日期
      getDate (list) {
        if (list.length > 0) {
          this.from_date = getDateTime(list[0], 's')
          this.to_date = getDateTime(list[1], 's')
        } else {
          // this.$refs.toolBar.dateArr = []
          this.dates = []
          this.from_date = ''
          this.to_date = ''
        }
      },
      // 确定点击事件
      sureEven (type) {
        this.optionsz.series[0].initialTreeDepth = 2
        let paramsData = {
          show_type: type + '', // 图形类型
          event_list: this.eventGroup, // 过程
          layouts: this.layouts, // 层级
          end_event: this.end_event, // 结束事件 end_event
          start_event: this.start_event, // 开始事件 start_event
          from_date: this.from_date.substring(0, 8),
          to_date: this.to_date.substring(0, 8),
          analyse_type: this.analyse_type
        }
        // 判断条件必选 (时间 开始和结束 层级)
        if (!this.start_event) {
          Msg.alert('请选择开始事件')
          return
        } else if (!this.layouts) {
          Msg.alert('请选择层级')
          return
        } else if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 调用接口 显示echarts 分析图   ANALYSESEARCHOBJECT SELECTPATHANALDATA
        ajax.post(api.ANALYSESEARCHOBJECT,
          paramsData
        ).then(res => {
          let myChart = echarts.init(document.getElementById('main'))
          myChart.clear() // 清空缓存
          if (type === 1) { //  1表示桑基图 2表示树形图
            this.btnFalg = false
            if (res.data.data.length > 0) {
              this.options.title = this.options.title // 图标名称
              // 鼠标移动到某点的数据
              this.options.tooltip = this.options.tooltip
              // 主要路径 name
              this.options.series.data = res.data.data
              // 主要路径值
              this.options.series.links = res.data.links
            } else {
              Msg.alert('没有查找到数据')
              return
            }
            myChart.setOption(this.options, true)
          } else {
            this.btnFalg = true
            if (res.data.data.children.length > 0) {
              // this.optionsz.series[0].data = res.data.data.children
              this.optionsz.series[0].data = []
              this.optionsz.series[0].data.push(res.data.data)
            } else {
              Msg.alert('没有查找到数据')
              return
            }
            myChart.setOption(this.optionsz, true)
          }
        })
      },
      cancelEven () { // 重置
        this.eventGroup = [ // 过程
          {
            event_id: ''
          }
        ]
        this.dates = [] // 时间
        this.from_date = ''
        this.to_date = ''
        this.layouts = '' // 层级
        this.end_event = '' // 结束事件
        this.start_event = '' // 开始事件
        this.$refs.toolBar.dateArr = []
        echarts.init(document.getElementById('main')).clear()
      },
      // 点击常用
      showList (obj) {
        ajax.post(api.SELECTBAARCHANAL,
          {
            anal_id: obj.anal_id
          }
        ).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          this.eventGroup = data.event_list// 过程
          this.layouts = data.layouts// 层级
          this.end_event = data.end_event // 结束事件 end_event
          this.start_event = data.start_event // 开始事件 start_event
          // 添加到时间选择框里面
          this.from_date = data.from_date
          this.to_date = data.to_date
          let dateArr = [dateFormat(this.from_date), dateFormat(this.to_date)]
          dateArr.forEach((item, index) => {
            this.dates.splice(index, 1, item)
          })
        })
      }
    },
    created () {
      this.dates = [new Date(), new Date()]
      this.from_date = getDateTime(new Date(), 's')
      this.to_date = getDateTime(new Date(), 's')
      // 用户分群列表
      ajax.post(api.SELECTUSERGROUPLIST).then(res => {
        this.groupList = res.data
      })
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.event_list = this.data.B020002
    },
    components: {
      VButton,
      VHeader,
      VPageHeader,
      RangeDatePicker
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #path-analysis
    height: 100%
    .mr2
      font-size: 14px
      margin: 0 12px 0 2px
    .tags > span
      font-size: 12px
      color: #5a5e66
      padding: 6px 7px
      border: 1px solid #d8dce5
      border-radius: 4px
      margin-right: 15px
    .common-conditions, .conditions, .conversation, .com-content
      height: 50px
      line-height: 50px
      padding: 0 20px
      background-color #fff
      i.iconfont
        color #d8dce5
        margin 0 5px 0 5px
        font-size 14px
      i.iconfont:hover
        color #016DFB
    .time-screening
      background-color #fff
      padding-bottom 20px
      border-top 1px solid #d8dce5
      span.font12
        display inline-block
        width 80px
        height 30px
        font-size 12px
      .padding20
        padding-left 20px
      .btns
        margin-right 20px
      .filter-conditions
        padding 10px 20px 20px 30px
    .conditions > .font12
      display: inline-block
      width: 80px
    .f-chart
      margin-top 10px
      background-color #fff
      padding: 10px 0px 20px 20px
      & > div
        margin: 20px 0
      .btns
        margin-right 10%
        text-align right
    .sure-btn
      margin-left 20px
    .canvas
      width: 1060px
      height: 500px
  .displaybox
    display inline-block
    padding 0 20px
    height 50px
    line-height 50px
    background-color #fff
</style>
